<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入 Bootstrap -->
        <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
        <title>BS模板</title>
        <style>
            html,body{
                height: 100%;
            }
            #navbar-example{
                position: fixed;
                left: 40px;
                top: 50%;
                transform: translateY(-50%);
            }
            #navbar-example .nav li{
                float: none;
                width: 40px;
                text-align: center;
                border-bottom: 1px solid #eee;
            }
            #navbar-example .nav li.active a {
                background-color: red;
            }
            #navbar-example .nav li a{
                padding: 10px 5px;
                font-size: 12px;
                color: #aaa;
            }
        </style>
    </head>
    <body data-spy="scroll" data-target="#navbar-example" data-offset="0">
        <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
            <div class="">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#ios">机械设备</a>
                    </li>
                    <li>
                        <a href="#svn">农林牧副</a>
                    </li>
                    <li>
                        <a href="#java">建筑建材</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container">
            <h4 id="ios">iOS</h4>
            <div style="height:1000px;background-color:red;">机械设备
                <div id="myCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="./imgs/0.jpg" alt="First slide">
                        </div>
                        <div class="item">
                            <img src="./imgs/1.jpg" alt="Second slide">
                        </div>
                        <div class="item">
                            <img src="./imgs/2.jpg" alt="Third slide">
                        </div>
                        <div class="item">
                            <img src="./imgs/complete.jpg" alt="Third slide">
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                        <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
            <h4 id="svn">SVN</h4>
            <div style="height:1300px;background-color:green;">农林牧副</div>
            <h4 id="java">jMeter</h4>
            <div style="height:1500px;background-color:blue;">建筑建材</div>
        </div>
    </body>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="./bootstrap-3.4.1-dist/js/jquery-3.5.1.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script>
        $('#myCarousel').carousel({
            interval: 5000,
            wrap: false
        })
    </script>
</html>